<template>
  <div class="settings-container">
    <el-card class="settings-card" header="系统设置">
      <el-form :model="tokenSettings" label-width="140px" class="settings-form">
        <el-form-item label="认证Token">
          <el-input 
            v-model="tokenSettings.authToken" 
            type="textarea" 
            :rows="3"
            placeholder="请输入认证Token"
          />
        </el-form-item>
        
        <el-form-item label="刷新Token">
          <el-input 
            v-model="tokenSettings.refreshToken" 
            type="textarea" 
            :rows="3"
            placeholder="请输入刷新Token"
          />
        </el-form-item>
        
        <el-form-item label="使用本地Token">
          <el-switch v-model="tokenSettings.useLocalTokens" />
        </el-form-item>
        
        <el-form-item>
          <el-space>
            <el-button type="primary" @click="handleSaveTokens">
              <el-icon><Check /></el-icon>
              保存Token设置
            </el-button>
            <el-button @click="handleClearTokens">
              <el-icon><Delete /></el-icon>
              清除Token
            </el-button>
            <el-button @click="handleRefresh">
              <el-icon><Refresh /></el-icon>
              刷新
            </el-button>
          </el-space>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
import { Check, Delete, Refresh } from '@element-plus/icons-vue';

const tokenSettings = ref({
  authToken: '',
  refreshToken: '',
  useLocalTokens: false
});

onMounted(() => {
  tokenSettings.value = {
    authToken: localStorage.getItem('auth_token') || '',
    refreshToken: localStorage.getItem('refresh_token') || '',
    useLocalTokens: localStorage.getItem('use_local_tokens') === 'true'
  };
});

const handleSaveTokens = () => {
  if (tokenSettings.value.authToken) {
    localStorage.setItem('auth_token', tokenSettings.value.authToken);
  }
  
  if (tokenSettings.value.refreshToken) {
    localStorage.setItem('refresh_token', tokenSettings.value.refreshToken);
  }
  
  localStorage.setItem('use_local_tokens', String(tokenSettings.value.useLocalTokens));
  
  ElMessage.success('Token设置已保存');
};

const handleClearTokens = () => {
  localStorage.removeItem('auth_token');
  localStorage.removeItem('refresh_token');
  localStorage.removeItem('use_local_tokens');
  
  tokenSettings.value = {
    authToken: '',
    refreshToken: '',
    useLocalTokens: false
  };
  
  ElMessage.success('Token已清除');
};

const handleRefresh = () => {
  tokenSettings.value = {
    authToken: localStorage.getItem('auth_token') || '',
    refreshToken: localStorage.getItem('refresh_token') || '',
    useLocalTokens: localStorage.getItem('use_local_tokens') === 'true'
  };
  ElMessage.success('已刷新');
};
</script>

<style scoped>
.settings-container {
  padding: 24px;
  background-color: var(--background-color, var(--el-bg-color-page, #f0f2f5));
  min-height: 100vh;
}

.settings-card {
  background-color: var(--card-background-color, var(--el-bg-color, #fff));
  border-radius: var(--radius-md, 8px);
  box-shadow: var(--shadow-sm, 0 2px 4px rgba(0, 0, 0, 0.1));
}

.settings-form {
  max-width: 800px;
}
</style>

